<template>
  <div class="scrolldiv" ref="scrolldiv">
    <div ref="scrollblock" class="scrollblock" @mousedown="blockMouseDown" >
    </div>
  </div>
</template>

<script>
export default {
    props: {
        min: {
            type: Number,
            default: 0
        },
        max: {
            type: Number,
            default: 100
        },
        value: {
            type: Number,
            default: 40
        },
        rangeValue:{
            type: Number,
            default: 20
        }
    },
    watch:{
        value(){
            if(!this.mousePoint.isDown)
            this.updateScrollBar();
        },
        rangeValue(){
            this.updateScrollBar();
        },
        max(val){
            this.maxAddNums = val + this.rangeValue
            this.updateScrollBar();
        }
    },
    data(){
        return {
            maxAddNums: this.max - this.rangeValue,
            mousePoint:{

            }
        }
    },
    mounted() {
        const observer = new ResizeObserver(entries => {
            for (let entry of entries) {
                this.updateScrollBar();
            }
        });
        observer.observe(this.$refs.scrolldiv);        
        this.updateScrollBar();
    },
    methods:{
        updateScrollBar(){
            console.log('update',this.max,this.rangeValue)
            this.$nextTick(()=>{
                const scrollblock = this.$refs.scrollblock;
                const scrolldiv = this.$refs.scrolldiv;
                if(scrolldiv && scrollblock)
                {
                    const height = scrolldiv.clientHeight * this.rangeValue/this.max ;
                    scrollblock.style.height = height + 'px';
                    const scrollHeight = scrolldiv.clientHeight;
                    scrollblock.style.top = scrollHeight * this.value/this.max+"px";                
                }
            })
        },
        blockMouseDown(event){
            this.mousePoint.isDown = true;
            this.mousePoint.Y = event.clientY;
            const scrollblock = this.$refs.scrollblock;
            this.mousePoint.top = parseFloat(scrollblock.style.top);
            window.addEventListener('mousemove',this.blockMouseMove)
            window.addEventListener('mouseup',this.mouseUp)
            event.preventDefault(); // 阻止默认行为
        },
        blockMouseMove(event){
            if(this.mousePoint.isDown == true && event.movementY !=0){
                const y = event.clientY - this.mousePoint.Y;
                const scrollblock = this.$refs.scrollblock;
                const scrolldiv = this.$refs.scrolldiv;
                const height = scrolldiv.clientHeight * this.rangeValue/this.max ;
                const scrollHeight = scrolldiv.clientHeight - height;
                let newTop = this.mousePoint.top + y;
                newTop = Math.max(0,newTop)
                newTop = Math.min(scrolldiv.clientHeight - height,newTop)
                scrollblock.style.top = newTop + 'px';
                const value = parseInt(newTop/scrolldiv.clientHeight*this.max)
                this.$emit('update:value', value)
                this.$emit('updateValue', value)
                requestAnimationFrame(()=>{
                    scrollblock.style.top = newTop + 'px';
                })
            }
        },
        mouseUp(event){
            this.mousePoint.isDown = false;
            window.removeEventListener('mousemove',this.blockMouseMove)
            window.removeEventListener('mouseup',this.mouseUp)
        }
    }
}
</script>

<style>
*{
    --primary-color: var(--theme-primary-color, #4c535a) ;
    --obprimary-color: var(--theme-obprimary-color,white) ;
    --text-color: var(--theme-text-color, #4c535a) ;
    --disable-color: var(--theme-disable-color, #4c535a) ;
}
.scrolldiv{
    height: 100%;
    display: block;
    position: relative;
    background: var(--obprimary-color);
    border: #4c535a 0.5px solid;
}
.scrollblock{
    display: block;
    position: absolute;
    top:0;
    width: 100%;
    background: var(--primary-color);
}

</style>